<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表过滤_用computed</title>
    <script src="js/vue.js"></script>
</head>
<body>
<div id="root">
    <input type="text" placeholder="请输入名字" v-model="keyword">
    <ul>
        <li v-for="(item,index) in fmtPersons" :key="item.id">
            {{ item.name}}---{{item.age}}----{{item.sex}}
        </li>
    </ul>
</div>
<script type="text/javascript">
    Vue.config.productionTip=false//禁止提示生产提示
    new Vue({
        el:"#root",
        data(){
            return {
                keyword:"",
                persons:[
                    {id:'001',name:'马冬梅',age:19,sex:'女'},
                    {id:'002',name:'周冬雨',age:18,sex:'女'},
                    {id:'003',name:'周杰伦',age:21,sex:'男'},
                    {id:'004',name:'温兆伦',age:20,sex:'男'}
                ],//原始人员列表
            }
        },
        computed:{
            fmtPersons(){
                return this.persons.filter((p)=>{
                    return p.name.indexOf(this.keyword)!==-1
                })
            }
        }
    })
</script>
</body>
</html>